<template>
  <el-card style="height: 320px">
    <template #header>
      <span class="title" style="position: relative">
        <i class="post"> </i>
        <span class="title">
          {{ title }}
        </span>
      </span>
      <span class="more" @click="toArticles"> 了解更多 > </span>
    </template>
    <div
      class="article"
      v-for="article in articleList.slice(0, 10)"
      :key="article.id"
      style="margin: 0"
      @click="
        $router.push({
          name: 'article',
          query: {
            articleId: article.id,
          },
        })
      "
    >
      <span class="row center" style="position: relative">
        <i class="spot"></i>
        <el-text truncated style="width: 240px">
          {{ article.title }}
        </el-text>
      </span>
      <span>
        {{ article.time.slice(5, 10) }}
      </span>
    </div>
  </el-card>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: ['title', 'type'],
  setup(props) {
    const router = useRouter()
    const articleList = ref<any>([])
    onMounted(() => {
      // 根据文章类型获取文章
      axios
        .get('/api/getEssayByType', {
          params: {
            type: props.type,
          },
        })
        .then((res) => {
          console.log(res.data)
          articleList.value = res.data.data
        })
    })

    // 点击类型时跳转到该类型的文章列表
    const toArticles = () => {
      console.log(props.type)
      router.push({
        path: '/articles',
        query: {
          articleType: props.type,
        },
      })
    }
    return {
      articleList,
      toArticles,
    }
  },
})
</script>

<style scoped>
.article {
  /* width: 100%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 4px 12px 4px 12px;
}
.title {
  color: #205ab4;
  font-weight: 00;
}
.article:hover {
  color: blue;
}

.el-text:hover {
  color: blue !important;
}

.post {
  display: block;
  width: 5px;
  height: 24px;
  position: absolute;
  left: -16px;
  top: 50%;
  margin-top: -12px;
  background: #205ab4;
}
.spot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  position: absolute;
  left: -16px;
  background: gray;
}
.article:hover .spot {
  background-color: #205ab4;
}
.more {
  color: #999999;
  font-size: 12px;
  float: right;
}
.more:hover {
  color: #205ab4;
}
</style>
